提升維護性

由於直接書寫在 :class 裡雖然方便，但隨著未來可能需要增加的 class 愈來愈多，閱讀及維護性便會變得更加困難。

因此，透過將內容建立於 computed 裡，以 function 的方式來進行呼叫回傳，會變得更整齊易讀，同時也更大幅度的提升維護的容易性。

建立 function 及回傳

首先到 computed 裡，新增一個 function（ 若先前已經有寫別的 function，請務必記得增加 “,” 以做區隔連接 ），接著將原本書寫於 :class 裡的內容剪下並貼進去 function 裡面，進行回傳。

其中，請特別注意需要加上 “this.” 進行指定。

btnAddClasses(){
  return {
    bgAdd: this.bgOrange
  }
}

在 :class 裡直接呼叫 function 名稱即可，請不要加上 ()。

<button type="button" v-on:click="addMusicQuotes" 
  class="border-yellow-600 m-3"
  :class="btnAddClasses"
>
  Add
</button>

接著存檔即大功告成。

萬事都有個 but!

如何透過其他 element 再增加新 class 呢？

在此使用 selec element 作為呼叫另一個文字顏色修改的示範。

增添下列內容至 template 裡，先設定預設顏色（ 由於已經是白色，故此不需要值 ），接著增加兩種適當配色。

<select v-model="textColor">
  <option value="">white</option>
  <option value="text-cyan">Cyan</option>
  <option value="text-purple">Purple</option>
</select>

於 data(){}中做新增（ 注意，並非呼叫 function ）

  textColor: ''

在 style 加上 css 設定。

.text-black {
  color: black
}
.text-purple {
  color: purple
}

接著更新

<button type="button" v-on:click="addMusicQuotes" 
  class="border-yellow-600 m-3"
  :class="textColor"
>
  Add
</button>

透過選擇不同的選項，可以看到文字顏色的變換。

然而稍早的寫法是透過直接呼叫 “btnAddClasses”，而目前使用的是 “textColor” ，兩者並無法同時存在。

因為不能同時呼叫 expression 跟 object syntax。

就是這個 But，若是除了修改背景也希望改變文字顏色，可以改用 [] 的寫法，優先呼叫 object syntax 再呼叫 expression。

透過這個方式便可以順利的進行多個 class 新增與維護。

視情境進行技術選用

截至目前為止，已經介紹了基本與進階的寫法。

可以透過 checbox 也可以透過 select 的寫法來進行 class 的組合，在使用的時候，務必記得目標是什麼，再選用適當的方式進行撰寫，如此便可以提高維護性及保持程式的彈性。

也許有哪裡解釋得不夠清楚，或是希望有更多的範本，隨時歡迎留言告知喲。